import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives
} from 'unocss'

export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(vue|[jt]sx|mdx?|html)($|\?)/,
        'src/router/routes/*.ts',
        'src/modules/mimo/ModuleDebugger/constants.ts'
      ]
    }
  },
  presets: [
    presetAttributify({ prefix: 'v:' }),
    presetIcons({
      extraProperties: { display: 'inline-block', 'vertical-align': 'middle' }
    }),
    presetUno()
  ],
  rules: [
    [/^bg-arco-(.*)$/, ([, c]) => ({ 'background-color': `rgb(var(--${c}))` })],
    [/^bg-arco-(\w*)$/, ([, c]) => ({ 'background-color': `var(--color-bg-${c})` })],
    [/^text-arco-(.*)$/, ([, c]) => ({ color: `rgb(var(--${c}))` })],
    [/^text-arco-(\w*)$/, ([, c]) => ({ color: `var(--color-text-${c})` })],
    [/^border-arco-(.*)$/, ([, c]) => ({ 'border-color': `rgb(var(--${c}))` })],
    [/^border-arco-(\w*)$/, ([, c]) => ({ 'border-color': `var(--color-border-${c})` })]
  ],
  safelist: ['text-lg'],
  shortcuts: {
    'arco-table-thead':
      'select-none text-arco-2! font-bold! bg-arco-2! border-b-solid border-b-2 border-arco-1',
    card: 'bg-arco-2 rounded pa-xs',
    'card-title': 'text-base text-arco-2 my-0 inline-flex gap-1 items-center select-none',
    'scrollbar-slim':
      'scrollbar:(w-2 h-2 bg-arco-gray-2) scrollbar-corner:bg-arco-gray-2 scrollbar-thumb:(rounded bg-arco-gray-4 h-2 w-2)'
  },
  transformers: [transformerDirectives()],
  variants: [
    (matcher) => {
      if (!matcher.startsWith('scrollbar:')) return matcher
      return {
        matcher: matcher.slice(10),
        selector: (s) => `${s}::-webkit-scrollbar`
      }
    },
    (matcher) => {
      if (!matcher.startsWith('scrollbar-thumb:')) return matcher
      return {
        matcher: matcher.slice(16),
        selector: (s) => `${s}::-webkit-scrollbar-thumb`
      }
    },
    (matcher) => {
      if (!matcher.startsWith('scrollbar-corner:')) return matcher
      return {
        matcher: matcher.slice(17),
        selector: (s) => `${s}::-webkit-scrollbar-corner`
      }
    }
  ]
})
